<template>
    <div class="Fine">
        <van-tabs v-model="active" @change="goRouter">
            <van-tab
                v-for="(item, index) in fineData"
                :key="index"
                :title="item.title"
            ></van-tab>

            <keep-alive :include="['Singer','Recommend']">
                <router-view />
            </keep-alive>
        </van-tabs>
    </div>
</template>

<script>
import { mapState, mapMutations, mapGetters, mapActions, createNamespacedHelpers } from 'vuex';
export default {
    name: 'Fine',
    components: {},
    methods: {
        ...mapMutations(['changemainRouter']),

        goRouter() {
            console.log("go ===> ", this.fineData[this.active].name);
            this.changemainRouter(this.fineData[this.active].name)
            this.$router.push({ name: this.fineData[this.active].name });
        }
    },

    data() {
        return {
            active: 0,
            fineData: [
                { title: "歌手", name: 'Singer' },
                { title: "推荐", name: 'Recommend' },
                { title: "搜索", name: 'Search' },
            ]
        }
    },
    created() {
        console.log(this.$route);
        for (let i = 0; i < this.fineData.length; i++) {
            if (this.fineData[i].name.indexOf(this.$route.name) > -1) {
                this.active = i;
                break
            }
        }
    },
}
</script>

<style lang="less">
.Fine {
    position: fixed;
    padding-top: 6px;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    padding-bottom: 96px;
    background-color: #000000;

    .van-tabs {
        .van-tab {
            background-color: #000000;

            color: #fff;
            text-align: center;
            letter-spacing: 1px;
        }
        .van-tab.van-tab--active {
            font-size: 18px;
            font-weight: 600;
            .van-tab__text {
                background-image: linear-gradient(-135deg, #fd03fb, #00d5ff);
                background-clip: text;
                -webkit-background-clip: text;
                color: transparent;
            }
        }
        .van-tabs__line {
            background-image: linear-gradient(90deg, #fd03fb, #00d5ff);
            width: 14%;
            margin-bottom: 6px;
        }

        .van-tabs__content {
            color: #fff;
        }
    }
}
</style>
